import React from 'react';
import { useState } from 'react';
import { Card, Form, Input, Checkbox, Button, Alert, message } from 'antd';
import { useSelector, useDispatch } from 'react-redux';
import { login, loadData } from '../../redux/features/loginSlice'; // 引入actions
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import './index.scss'
import { useNavigate } from 'react-router-dom';
const Login = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate()
  let [loadings, setLoadings] = useState(false);
  const onFinish = async (values) => {
    // console.log('Success:', values);
    const { remember, username, password } = values
    if (!remember) {
      message.warning('请勾选用户协议！')
    }
    // dispatch(login({ mobile: username, code: password }))
    try {
      setLoadings(loadings = true)
      const res = await dispatch(loadData({ mobile: username, code: password }))
      message.info('登录成功！')
      navigate('/index')
    } finally {
      setLoadings(loadings = false)
    }
  };
  return (
    <div className='login_container'>
      <Card title="登录" className='login_card_container'>
        <Alert message="密码：246810" type="info" showIcon style={{ marginBottom: '20px' }} />
        <Form
          name="normal_login"
          size="large"
          className="login-form"
          onFinish={onFinish}
          initialValues={{ remember: true }}
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: '手机号不能为空!' }, { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }]}
          >
            <Input placeholder="请输入手机号" prefix={<UserOutlined className="site-form-item-icon" />} />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: '密码不能为空!' }]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="请输入密码"
            />
          </Form.Item>
          <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>
                <span>我已经阅读并同意[用户协议]与[用户条款]</span>
              </Checkbox>
            </Form.Item>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button" loading={loadings}>
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
}

export default Login;
